<template>
	<div>
		<div>
			<el-space>
				<el-button v-for="(v, i) in listState" :key="i" :type="v === orderState ? 'primary' : 'default'"
					@click="changeOrderState(v)">{{ v }}</el-button>
			</el-space>
		</div>
		<el-row>
			<el-col :span="8" class="col">
				<span>输入搜索：</span>
				<el-input placeholder="订单编号" v-model="id" class="ipt" @input="debounceFetchList"></el-input>
			</el-col>
			<el-col :span="8" class="col">
				<span>时间搜索：</span>
				<el-date-picker class="ipt" v-model="date" type="daterange" range-separator="To" start-placeholder="Start date"
					end-placeholder="End date" size="large" @change="debounceFetchList" />
			</el-col>
			<el-col :span="8" class="col">
				<span>联系方式：</span>
				<el-input placeholder="电话" v-model="tel" class="ipt" @input="debounceFetchList"></el-input>
			</el-col>

		</el-row>
		<div>
			<el-button type="danger" @click="handleDeleteSelect">删除选中</el-button>
		</div>
		<el-table :data="list" @selection-change="handleSelectionChange">
			<el-table-column type="selection"></el-table-column>
			<el-table-column prop="id" label="编号"></el-table-column>
			<el-table-column prop="createDate" label="创建时间"></el-table-column>
			<el-table-column prop="tel" label="电话"></el-table-column>
			<el-table-column prop="price" label="价钱"></el-table-column>
			<el-table-column prop="method" label="支付方式"></el-table-column>
			<el-table-column prop="orderState" label="订单状态"></el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-popconfirm confirmButtonText="确认删除" cancelButtonText="取消删除" @confirm="handleDelete(scope.row)"
						title="确认要删除吗？">
						<template #reference>
							<el-button type="danger">删除</el-button>
						</template>
					</el-popconfirm>
					<el-button type="primary" @click="openDialog(scope.row)">编辑</el-button>
				</template>
			</el-table-column>>
		</el-table>
		<el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
			@current-change="changePageCode" />

		<el-dialog v-model="dialogVisible" title="信息修改">
			<el-row>
				<el-col>电话：</el-col>
				<el-col>
					<el-input v-model="currEditItem.tel"></el-input>
				</el-col>
			</el-row>
			<el-row>
				<el-col>单价：</el-col>
				<el-col>
					<el-input v-model="currEditItem.price"></el-input>
				</el-col>
			</el-row>
			<el-row>
				<el-col>支付方式：</el-col>
				<el-col>
					<el-select v-model="currEditItem.method" class="m-2" placeholder="Select">
						<el-option label="支付宝" value="支付宝" />
						<el-option label="微信" value="微信" />
						<el-option label="银行卡" value="银行卡" />
					</el-select>
				</el-col>
			</el-row>
			<el-row>
				<el-col>订单状态：</el-col>
				<el-col>
					<el-radio-group v-model="currEditItem.orderState" class="ml-4">
						<el-radio label="已付款" size="large">已付款</el-radio>
						<el-radio label="待发货" size="large">待发货</el-radio>
						<el-radio label="已发货" size="large">已发货</el-radio>
						<el-radio label="已完成" size="large">已完成</el-radio>
						<el-radio label="已关闭" size="large">已关闭</el-radio>
					</el-radio-group>
				</el-col>
			</el-row>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消修改</el-button>
					<el-button type="primary" @click="handleEdit">确认修改</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>


<script lang="ts" setup>
// 引入
import { onMounted, ref, watch } from 'vue'
import axios from 'axios'
import { debounce } from 'lodash'
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router'
const route = useRoute()
// 定义类型
type methodType = "微信" | '支付宝' | '银行卡'
type orderStateType = "待付款" | "待发货" | "已发货" | "已完成" | "已关闭"
// 定义接口
interface ListItemState {
	code: number
	"id": string,
	"createDate": string,
	"tel": string,
	"price": string,
	"method": methodType,
	"orderState": orderStateType
}

// 定义响应式变量
const list = ref<ListItemState[]>([]);
// 数据总数量
const total = ref(0)
// 分页器参数
const pageSize = ref(10)
const pageCode = ref(1)
// 订单状态数组
const listState = ['全部订单', "待付款", "待发货", "已发货", "已完成", "已关闭"]
const orderState = ref(route.query.orderState || '全部订单')
// 范围日期  编号  电话
const date = ref(['', ''])
const id = ref('')
const tel = ref('')
// 当前复选框选中的数据
const selections = ref<ListItemState[]>([])
// 定义弹框是否显示
const dialogVisible = ref(false)
const currEditItem = ref({
	"code": 1,
	"id": '',
	"createDate": "",
	"tel": '',
	"price": '110',
	"method": '微信',
	"orderState": '已关闭'
})

// 确认修改函数
const handleEdit = async () => {
	dialogVisible.value = false
	const resp = await axios.post('/api/list/edit', { currEditItem: currEditItem.value });
	ElMessage.success(resp.data.message)
	fetchList()
}

// 编辑打开弹框函数
const openDialog = (row: any) => {
	currEditItem.value = { ...row }
	dialogVisible.value = true
}

// 定义获取数据函数
const fetchList = async () => {
	const resp = await axios.get('/api/list', {
		// get 请求发送后端的参数
		params: {
			pageSize: pageSize.value,
			pageCode: pageCode.value,
			orderState: orderState.value,
			id: id.value,
			tel: tel.value,
			startDate: date.value === null ? '' : date.value[0],
			endDate: date.value === null ? '' : date.value[1],
		}
	})
	list.value = resp.data.data
	total.value = resp.data.total
}

// 函数防抖
const debounceFetchList = debounce(fetchList, 800)

// 定义页码改变函数
const changePageCode = (newPageCode: number) => {
	pageCode.value = newPageCode;
	debounceFetchList()
}
// 定义改变当前订单状态函数
const changeOrderState = (newOrderState: string) => {
	orderState.value = newOrderState;
	debounceFetchList()
}

// 定义多选发生改变事件
const handleSelectionChange = (selection: ListItemState[]) => {
	selections.value = selection
}

// 定义删除函数
const handleDelete = async (row: ListItemState) => {
	const resp = await axios.delete('/api/list', { params: { id: row.id } })
	console.log(resp.data)
	fetchList()
}

// 定义删除选中函数
const handleDeleteSelect = async () => {
	const ids = selections.value.map(v => {
		return v.id
	}).join(',')
	const resp = await axios.delete('/api/lists', { params: { ids } });
	fetchList()
}


// 设置侦听器
// watch(id, () => {
// 	fetchList()
// })


// 生命周期函数
onMounted(() => {
	fetchList()
})
</script>

<style lang="scss">
.col {
	display: flex;
	padding: 0 10px;
	height: 40px;
	margin: 10px 0;
	align-items: center;

	span {
		margin-right: 10px;
	}
}

.ipt {
	flex: 1;
}
</style>